<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="900px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <div class="session-dialog">
      <!-- 会话统计 -->
      <div class="session-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-statistic :title="$t('SessionManagement.ActiveSessions')" :value="statistics.totalSessions">
              <template #suffix>
                <el-icon style="color: #67c23a"><CircleCheck /></el-icon>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="6">
            <el-statistic :title="$t('SessionManagement.CurrentSession')" :value="statistics.currentSessions">
              <template #suffix>
                <el-icon style="color: #409eff"><Monitor /></el-icon>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="6">
            <el-statistic :title="$t('SessionManagement.MobileSessions')" :value="statistics.mobileSessions">
              <template #suffix>
                <el-icon style="color: #e6a23c"><Iphone /></el-icon>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="6">
            <el-statistic :title="$t('SessionManagement.ExpiredSessions')" :value="statistics.expiredSessions">
              <template #suffix>
                <el-icon style="color: #f56c6c"><Clock /></el-icon>
              </template>
            </el-statistic>
          </el-col>
        </el-row>
      </div>

      <!-- 搜索和过滤 -->
      <div class="session-filters">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchKeyword"
              :placeholder="$t('SessionManagement.SearchSession')"
              clearable
              @input="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="deviceFilter"
              :placeholder="$t('SessionManagement.FilterByDevice')"
              clearable
              @change="handleFilter"
            >
              <el-option :label="$t('SessionManagement.AllDevices')" value="" />
              <el-option :label="$t('SessionManagement.Desktop')" value="Desktop" />
              <el-option :label="$t('SessionManagement.Mobile')" value="Mobile" />
              <el-option :label="$t('SessionManagement.Tablet')" value="Tablet" />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="statusFilter"
              :placeholder="$t('SessionManagement.FilterByStatus')"
              clearable
              @change="handleFilter"
            >
              <el-option :label="$t('SessionManagement.AllStatus')" value="" />
              <el-option :label="$t('SessionManagement.Active')" value="Active" />
              <el-option :label="$t('SessionManagement.Idle')" value="Idle" />
              <el-option :label="$t('SessionManagement.Expired')" value="Expired" />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="refreshSessions">
              <el-icon><Refresh /></el-icon>
              {{ $t('Common.Refresh') }}
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 会话列表 -->
      <div class="session-list">
        <el-table
          v-loading="loading"
          :data="filteredSessions"
          row-key="id"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column :label="$t('SessionManagement.DeviceInfo')" min-width="200">
            <template #default="{ row }">
              <div class="device-info">
                <div class="device-icon">
                  <el-icon :size="24" :class="getDeviceIconClass(row.deviceType)">
                    <component :is="getDeviceIcon(row.deviceType)" />
                  </el-icon>
                </div>
                <div class="device-details">
                  <div class="device-name">{{ row.deviceName }}</div>
                  <div class="device-type">{{ getDeviceTypeName(row.deviceType) }}</div>
                  <div class="browser-info">{{ row.browser }} {{ row.browserVersion }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column :label="$t('SessionManagement.Location')" width="180">
            <template #default="{ row }">
              <div class="location-info">
                <div class="location-name">{{ row.location?.city || $t('SessionManagement.Unknown') }}</div>
                <div class="location-country">{{ row.location?.country || '' }}</div>
                <div class="ip-address">{{ row.ipAddress }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column :label="$t('SessionManagement.SessionTime')" width="160">
            <template #default="{ row }">
              <div class="session-time">
                <div class="login-time">
                  {{ $t('SessionManagement.LoginTime') }}: {{ formatTime(row.loginTime) }}
                </div>
                <div class="last-activity">
                  {{ $t('SessionManagement.LastActivity') }}: {{ formatTime(row.lastActivityTime) }}
                </div>
                <div class="duration">
                  {{ $t('SessionManagement.Duration') }}: {{ calculateDuration(row.loginTime) }}
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column :label="$t('SessionManagement.Status')" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)" size="small">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column :label="$t('SessionManagement.Security')" width="120">
            <template #default="{ row }">
              <div class="security-info">
                <el-tag v-if="row.isTwoFactorEnabled" type="success" size="small">
                  <el-icon><Lock /></el-icon>
                  2FA
                </el-tag>
                <el-tag v-if="row.isSecureConnection" type="info" size="small">
                  <el-icon><Shield /></el-icon>
                  HTTPS
                </el-tag>
                <el-tag v-if="row.isCurrentSession" type="warning" size="small">
                  <el-icon><Monitor /></el-icon>
                  {{ $t('SessionManagement.Current') }}
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column :label="$t('Common.Actions')" width="180" fixed="right">
            <template #default="{ row }">
              <el-space>
                <el-button
                  v-if="!row.isCurrentSession"
                  type="danger"
                  size="small"
                  plain
                  @click="revokeSession(row)"
                >
                  <el-icon><Close /></el-icon>
                  {{ $t('SessionManagement.Revoke') }}
                </el-button>
                <el-button
                  v-if="row.status === 'Idle'"
                  type="warning"
                  size="small"
                  plain
                  @click="extendSession(row)"
                >
                  <el-icon><Clock /></el-icon>
                  {{ $t('SessionManagement.Extend') }}
                </el-button>
                <el-button
                  type="info"
                  size="small"
                  plain
                  @click="viewSessionDetails(row)"
                >
                  <el-icon><View /></el-icon>
                  {{ $t('Common.Details') }}
                </el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 批量操作 -->
      <div class="bulk-actions">
        <el-space>
          <el-button
            :disabled="selectedSessions.length === 0"
            @click="revokeSelectedSessions"
          >
            <el-icon><Close /></el-icon>
            {{ $t('SessionManagement.RevokeSelected') }}
          </el-button>
          <el-button
            :disabled="selectedSessions.length === 0"
            @click="extendSelectedSessions"
          >
            <el-icon><Clock /></el-icon>
            {{ $t('SessionManagement.ExtendSelected') }}
          </el-button>
          <el-button
            type="danger"
            :disabled="selectedSessions.length === 0"
            @click="revokeAllExceptCurrent"
          >
            <el-icon><Delete /></el-icon>
            {{ $t('SessionManagement.RevokeAllExceptCurrent') }}
          </el-button>
        </el-space>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">{{ $t('Common.Close') }}</el-button>
        <el-button type="primary" @click="refreshSessions">
          <el-icon><Refresh /></el-icon>
          {{ $t('Common.Refresh') }}
        </el-button>
      </div>
    </template>

    <!-- 会话详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="$t('SessionManagement.SessionDetails')"
      width="600px"
      append-to-body
    >
      <div v-if="selectedSession" class="session-details">
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="$t('SessionManagement.SessionId')">
            {{ selectedSession.id }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.Status')">
            <el-tag :type="getStatusType(selectedSession.status)">
              {{ getStatusText(selectedSession.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.DeviceName')">
            {{ selectedSession.deviceName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.DeviceType')">
            {{ getDeviceTypeName(selectedSession.deviceType) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.Browser')">
            {{ selectedSession.browser }} {{ selectedSession.browserVersion }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.Platform')">
            {{ selectedSession.platform }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.IPAddress')">
            {{ selectedSession.ipAddress }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.Location')">
            {{ formatLocation(selectedSession.location) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.LoginTime')">
            {{ formatDateTime(selectedSession.loginTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.ExpiryTime')">
            {{ formatDateTime(selectedSession.expiryTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.LastActivity')">
            {{ formatDateTime(selectedSession.lastActivityTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('SessionManagement.Duration')">
            {{ calculateDetailedDuration(selectedSession.loginTime) }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="session-security-details">
          <h4>{{ $t('SessionManagement.SecurityInfo') }}</h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-tag :type="selectedSession.isTwoFactorEnabled ? 'success' : 'info'">
                <el-icon><Lock /></el-icon>
                {{ $t('SessionManagement.TwoFactor') }}:
                {{ selectedSession.isTwoFactorEnabled ? $t('Common.Enabled') : $t('Common.Disabled') }}
              </el-tag>
            </el-col>
            <el-col :span="12">
              <el-tag :type="selectedSession.isSecureConnection ? 'success' : 'danger'">
                <el-icon><Shield /></el-icon>
                {{ $t('SessionManagement.SecureConnection') }}:
                {{ selectedSession.isSecureConnection ? $t('Common.Yes') : $t('Common.No') }}
              </el-tag>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search,
  Refresh,
  Close,
  Clock,
  View,
  Delete,
  Monitor,
  Iphone,
  Tablet,
  Lock,
  Shield,
  CircleCheck
} from '@element-plus/icons-vue'
import { userService } from '@/services/user.service'

interface Props {
  modelValue: boolean
  userId: string
  userName?: string
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'session-revoked'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const loading = ref(false)
const searchKeyword = ref('')
const deviceFilter = ref('')
const statusFilter = ref('')
const sessions = ref<any[]>([])
const selectedSessions = ref<any[]>([])
const selectedSession = ref<any>(null)
const detailDialogVisible = ref(false)

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const dialogTitle = computed(() => {
  return props.userName
    ? `${$t('SessionManagement.UserSessions')} - ${props.userName}`
    : $t('SessionManagement.UserSessions')
})

// 统计信息
const statistics = computed(() => {
  const total = sessions.value.length
  const current = sessions.value.filter(s => s.isCurrentSession).length
  const mobile = sessions.value.filter(s => ['Mobile', 'Tablet'].includes(s.deviceType)).length
  const expired = sessions.value.filter(s => s.status === 'Expired').length

  return {
    totalSessions: total,
    currentSessions: current,
    mobileSessions: mobile,
    expiredSessions: expired
  }
})

// 过滤后的会话
const filteredSessions = computed(() => {
  let filtered = [...sessions.value]

  // 搜索过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(session =>
      session.deviceName?.toLowerCase().includes(keyword) ||
      session.browser?.toLowerCase().includes(keyword) ||
      session.ipAddress?.includes(keyword) ||
      session.location?.city?.toLowerCase().includes(keyword)
    )
  }

  // 设备类型过滤
  if (deviceFilter.value) {
    filtered = filtered.filter(session => session.deviceType === deviceFilter.value)
  }

  // 状态过滤
  if (statusFilter.value) {
    filtered = filtered.filter(session => session.status === statusFilter.value)
  }

  return filtered
})

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// 加载会话列表
const loadSessions = async () => {
  try {
    loading.value = true
    const result = await userService.getUserSessions(props.userId)
    sessions.value = result.items
    pagination.total = result.totalCount
  } catch (error) {
    console.error('加载用户会话失败:', error)
    ElMessage.error($t('SessionManagement.LoadSessionsFailed'))
  } finally {
    loading.value = false
  }
}

// 刷新会话列表
const refreshSessions = () => {
  loadSessions()
}

// 搜索处理
const handleSearch = () => {
  pagination.currentPage = 1
}

// 过滤处理
const handleFilter = () => {
  pagination.currentPage = 1
}

// 选择变化处理
const handleSelectionChange = (selection: any[]) => {
  selectedSessions.value = selection
}

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.currentPage = 1
}

// 当前页变化
const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
}

// 获取设备图标
const getDeviceIcon = (deviceType: string) => {
  const iconMap: Record<string, any> = {
    Desktop: Monitor,
    Mobile: Iphone,
    Tablet: Tablet
  }
  return iconMap[deviceType] || Monitor
}

// 获取设备图标样式
const getDeviceIconClass = (deviceType: string) => {
  const classMap: Record<string, string> = {
    Desktop: 'desktop-icon',
    Mobile: 'mobile-icon',
    Tablet: 'tablet-icon'
  }
  return classMap[deviceType] || 'desktop-icon'
}

// 获取设备类型名称
const getDeviceTypeName = (deviceType: string) => {
  const nameMap: Record<string, string> = {
    Desktop: $t('SessionManagement.Desktop'),
    Mobile: $t('SessionManagement.Mobile'),
    Tablet: $t('SessionManagement.Tablet')
  }
  return nameMap[deviceType] || deviceType
}

// 获取状态类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    Active: 'success',
    Idle: 'warning',
    Expired: 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    Active: $t('SessionManagement.Active'),
    Idle: $t('SessionManagement.Idle'),
    Expired: $t('SessionManagement.Expired')
  }
  return statusMap[status] || status
}

// 格式化时间
const formatTime = (time: string) => {
  return new Date(time).toLocaleTimeString()
}

// 格式化日期时间
const formatDateTime = (time: string) => {
  return new Date(time).toLocaleString()
}

// 格式化位置
const formatLocation = (location: any) => {
  if (!location) return $t('SessionManagement.Unknown')
  const parts = [location.city, location.region, location.country].filter(Boolean)
  return parts.join(', ') || $t('SessionManagement.Unknown')
}

// 计算持续时间
const calculateDuration = (startTime: string) => {
  const start = new Date(startTime)
  const now = new Date()
  const diff = now.getTime() - start.getTime()

  const hours = Math.floor(diff / (1000 * 60 * 60))
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))

  if (hours > 24) {
    const days = Math.floor(hours / 24)
    return `${days}${$t('SessionManagement.Days')}`
  } else if (hours > 0) {
    return `${hours}${$t('SessionManagement.Hours')}`
  } else {
    return `${minutes}${$t('SessionManagement.Minutes')}`
  }
}

// 计算详细持续时间
const calculateDetailedDuration = (startTime: string) => {
  const start = new Date(startTime)
  const now = new Date()
  const diff = now.getTime() - start.getTime()

  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))

  const parts = []
  if (days > 0) parts.push(`${days}${$t('SessionManagement.Days')}`)
  if (hours > 0) parts.push(`${hours}${$t('SessionManagement.Hours')}`)
  if (minutes > 0) parts.push(`${minutes}${$t('SessionManagement.Minutes')}`)

  return parts.join(' ') || $t('SessionManagement.LessThanMinute')
}

// 撤销会话
const revokeSession = async (session: any) => {
  if (session.isCurrentSession) {
    ElMessage.warning($t('SessionManagement.CannotRevokeCurrentSession'))
    return
  }

  try {
    await ElMessageBox.confirm(
      $t('SessionManagement.RevokeSessionConfirm'),
      $t('SessionManagement.RevokeSession'),
      {
        confirmButtonText: $t('Common.Confirm'),
        cancelButtonText: $t('Common.Cancel'),
        type: 'warning'
      }
    )

    await userService.revokeSession(props.userId, session.id)
    ElMessage.success($t('SessionManagement.RevokeSessionSuccess'))
    emit('session-revoked')
    loadSessions()
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('撤销会话失败:', error)
      ElMessage.error($t('SessionManagement.RevokeSessionFailed'))
    }
  }
}

// 延长会话
const extendSession = async (session: any) => {
  try {
    await userService.extendSession(props.userId, session.id)
    ElMessage.success($t('SessionManagement.ExtendSessionSuccess'))
    loadSessions()
  } catch (error) {
    console.error('延长会话失败:', error)
    ElMessage.error($t('SessionManagement.ExtendSessionFailed'))
  }
}

// 查看会话详情
const viewSessionDetails = (session: any) => {
  selectedSession.value = session
  detailDialogVisible.value = true
}

// 撤销选中的会话
const revokeSelectedSessions = async () => {
  if (selectedSessions.value.length === 0) return

  try {
    await ElMessageBox.confirm(
      $t('SessionManagement.RevokeSelectedConfirm', { count: selectedSessions.value.length }),
      $t('SessionManagement.RevokeSelected'),
      {
        confirmButtonText: $t('Common.Confirm'),
        cancelButtonText: $t('Common.Cancel'),
        type: 'warning'
      }
    )

    const sessionIds = selectedSessions.value
      .filter(session => !session.isCurrentSession)
      .map(session => session.id)

    if (sessionIds.length === 0) {
      ElMessage.warning($t('SessionManagement.NoRevocableSessions'))
      return
    }

    await userService.revokeMultipleSessions(props.userId, sessionIds)
    ElMessage.success($t('SessionManagement.RevokeSelectedSuccess'))
    emit('session-revoked')
    loadSessions()
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('批量撤销会话失败:', error)
      ElMessage.error($t('SessionManagement.RevokeSelectedFailed'))
    }
  }
}

// 延长选中的会话
const extendSelectedSessions = async () => {
  if (selectedSessions.value.length === 0) return

  try {
    const sessionIds = selectedSessions.value
      .filter(session => session.status === 'Idle')
      .map(session => session.id)

    if (sessionIds.length === 0) {
      ElMessage.warning($t('SessionManagement.NoExtendableSessions'))
      return
    }

    await userService.extendMultipleSessions(props.userId, sessionIds)
    ElMessage.success($t('SessionManagement.ExtendSelectedSuccess'))
    loadSessions()
  } catch (error) {
    console.error('批量延长会话失败:', error)
    ElMessage.error($t('SessionManagement.ExtendSelectedFailed'))
  }
}

// 撤销除当前会话外的所有会话
const revokeAllExceptCurrent = async () => {
  try {
    await ElMessageBox.confirm(
      $t('SessionManagement.RevokeAllExceptCurrentConfirm'),
      $t('SessionManagement.RevokeAllExceptCurrent'),
      {
        confirmButtonText: $t('Common.Confirm'),
        cancelButtonText: $t('Common.Cancel'),
        type: 'warning'
      }
    )

    const currentSessionId = sessions.value.find(s => s.isCurrentSession)?.id
    const sessionIds = sessions.value
      .filter(session => session.id !== currentSessionId)
      .map(session => session.id)

    if (sessionIds.length === 0) {
      ElMessage.info($t('SessionManagement.NoOtherSessions'))
      return
    }

    await userService.revokeMultipleSessions(props.userId, sessionIds)
    ElMessage.success($t('SessionManagement.RevokeAllSuccess'))
    emit('session-revoked')
    loadSessions()
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('撤销所有会话失败:', error)
      ElMessage.error($t('SessionManagement.RevokeAllFailed'))
    }
  }
}

// 处理关闭
const handleClose = () => {
  dialogVisible.value = false
  setTimeout(() => {
    searchKeyword.value = ''
    deviceFilter.value = ''
    statusFilter.value = ''
    selectedSessions.value = []
    selectedSession.value = null
    pagination.currentPage = 1
  }, 300)
}

// 监听对话框打开
watch(() => props.modelValue, (newValue) => {
  if (newValue && props.userId) {
    loadSessions()
  }
})
</script>

<style scoped>
.session-dialog {
  height: 600px;
  display: flex;
  flex-direction: column;
}

.session-stats {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.session-filters {
  margin-bottom: 20px;
}

.session-list {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.device-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.device-icon {
  flex-shrink: 0;
}

.desktop-icon {
  color: #409eff;
}

.mobile-icon {
  color: #e6a23c;
}

.tablet-icon {
  color: #67c23a;
}

.device-details {
  flex: 1;
}

.device-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.device-type {
  font-size: 12px;
  color: #909399;
  margin-bottom: 2px;
}

.browser-info {
  font-size: 11px;
  color: #c0c4cc;
}

.location-info {
  font-size: 12px;
}

.location-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.location-country {
  color: #909399;
  margin-bottom: 2px;
}

.ip-address {
  color: #606266;
  font-family: monospace;
}

.session-time {
  font-size: 12px;
}

.login-time,
.last-activity,
.duration {
  margin-bottom: 2px;
  color: #606266;
}

.security-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.bulk-actions {
  margin-top: 20px;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 0 0 4px 4px;
  border-top: 1px solid #ebeef5;
}

.session-details {
  margin-bottom: 20px;
}

.session-security-details {
  margin-top: 20px;
}

.session-security-details h4 {
  margin-bottom: 10px;
  color: #303133;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-statistic__head) {
  font-size: 12px;
  color: #909399;
}

:deep(.el-statistic__content) {
  font-size: 24px;
  font-weight: 600;
}

:deep(.el-table) {
  flex: 1;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
}
</style>